<template>
  <view class="address-page">
    <!-- 地址列表 -->
    <view class="address-list" v-if="addressList.length > 0">
      <view 
        v-for="(address, index) in addressList" 
        :key="index"
        class="address-card"
        @tap="selectAddress(address)"
      >
        <view class="address-info">
          <view class="address-header">
            <text class="contact-name">{{ address.name }}</text>
            <text class="contact-phone">{{ address.phone }}</text>
          </view>
          <text class="address-detail">{{ address.detail }}</text>
          <view v-if="address.isDefault" class="default-tag">默认地址</view>
        </view>
        
        <view class="address-actions">
          <view class="action-btn" @tap.stop="editAddress(address)">
            <text class="action-text">编辑</text>
          </view>
          <view class="action-btn delete" @tap.stop="deleteAddress(address)">
            <text class="action-text">删除</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <view class="empty-icon">📍</view>
      <text class="empty-title">暂无地址</text>
      <text class="empty-subtitle">点击添加回收地址</text>
    </view>

    <!-- 添加地址按钮 -->
    <view class="add-address-btn" @tap="addAddress">
      <text class="add-text">+ 添加新地址</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const addressList = ref([
  {
    id: 1,
    name: '张三',
    phone: '138****8888',
    detail: '北京市朝阳区三里屯街道工体北路8号院',
    isDefault: true
  }
])

const selectAddress = (address) => {
  // 通知回收页面更新选中的地址
  uni.$emit('addressSelected', address)
  
  uni.showToast({
    title: '地址已选择',
    icon: 'success'
  })
  
  setTimeout(() => {
    uni.navigateBack()
  }, 1000)
}

const addAddress = () => {
  uni.showModal({
    title: '添加地址',
    content: '请填写详细的回收地址信息',
    success: (res) => {
      if (res.confirm) {
        // 模拟添加地址
        const newAddress = {
          id: Date.now(),
          name: '新用户',
          phone: '139****9999',
          detail: '新添加的地址信息',
          isDefault: false
        }
        
        addressList.value.push(newAddress)
        
        uni.showToast({
          title: '地址添加成功',
          icon: 'success'
        })
      }
    }
  })
}

const editAddress = (address) => {
  uni.showToast({
    title: `编辑地址：${address.name}`,
    icon: 'none'
  })
}

const deleteAddress = (address) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这个地址吗？',
    success: (res) => {
      if (res.confirm) {
        const index = addressList.value.findIndex(item => item.id === address.id)
        if (index > -1) {
          addressList.value.splice(index, 1)
          uni.showToast({
            title: '地址已删除',
            icon: 'success'
          })
        }
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.address-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 24rpx 32rpx;
}

.address-list {
  margin-bottom: 120rpx;
}

.address-card {
  background: white;
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.address-card:active {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.address-info {
  margin-bottom: 24rpx;
  position: relative;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.contact-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.contact-phone {
  font-size: 26rpx;
  color: #666;
}

.address-detail {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.default-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: #8BC34A;
  color: white;
  font-size: 20rpx;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
}

.address-actions {
  display: flex;
  justify-content: flex-end;
  gap: 24rpx;
}

.action-btn {
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
  border: 2rpx solid #8BC34A;
  transition: all 0.3s ease;
}

.action-btn:active {
  transform: scale(0.95);
}

.action-text {
  font-size: 24rpx;
  color: #8BC34A;
}

.delete {
  border-color: #f44336;
}

.delete .action-text {
  color: #f44336;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  text-align: center;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
  opacity: 0.5;
}

.empty-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.empty-subtitle {
  font-size: 26rpx;
  color: #999;
}

.add-address-btn {
  position: fixed;
  bottom: 40rpx;
  left: 32rpx;
  right: 32rpx;
  background: linear-gradient(135deg, #8BC34A 0%, #7CB342 100%);
  color: white;
  text-align: center;
  padding: 32rpx;
  border-radius: 50rpx;
  box-shadow: 0 8rpx 24rpx rgba(139, 195, 74, 0.3);
  transition: all 0.3s ease;
}

.add-address-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(139, 195, 74, 0.3);
}

.add-text {
  font-size: 32rpx;
  font-weight: 600;
}
</style>